<template>
  <div
    class="gifC"
    :style="{
      transform: `translate(-50%, -50%) rotate(${- props.symbol.rotate}deg)`,
      width: props.symbol.width + 'px',
      height: props.symbol.height + 'px',
      left: props.position[0] * props.realBox.scale + 'px',
      top: props.realBox.height - props.position[1] * props.realBox.scale + 'px',
      //cursor: props.pageT ? 'pointer' : 'default',
    }"
    @click="gifClick()"
  >
    <img
      :src="props.symbol.url"
      :width="props.symbol.width"
      :height="props.symbol.height"
    />
  </div>
</template>

<script setup>
const props = defineProps({
  realBox: {
    type: Object,
    required: true,
  },
  position: {
    type: Array,
    required: true,
  },
  symbol: {
    type: Object,
    required: true,
  },
  pageT: {
    type: [Object, undefined],
    default: function () {
      return null;
    },
  },
});
const emits = defineEmits(['setPopup'])
const gifClick = () => {
  if (props.pageT) {
    emits('setPopup', props.pageT);
  }
}
</script>

<style lang="scss" scoped>
.gifC {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  left: 20px;
}
</style>